昨天說到了SPA，那今天就開始router筆記之路。

安裝router

npm i react-router-dom

import Router會使用到的基本要素

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

定義Routes中的每個route

1. Route

   使用Route可以去設定路徑，當前的URL符合路徑時，就會把指定的元件渲染出來。

   <Route path="/" element={<Home />} />
   

2. Routes

   Routes是Route的外層，Route必須由Routes包起來，當URL變動時，Routes會去找尋所有的Route，已顯示對的元件。

   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/contact" element={<Contact />} />
   </Routes>
   

加上導覽列表

1. Link

   這個Link在前台看到的就是我們常見的，他的href是用to是指向

   <Link to="/">Home</Link>
   

   補充另一個連結的方式<NavLink>，他跟<Link>不同的地方在於它會幫當前頁加上active的class

   <NavLink to="/">Home</NavLink>
   

Router的輪廓

App.js整個完整的樣子會像是這樣! nav區域是在Routes之外，因此當我們使用Link去切換時，nav區域不會再次被渲染，只有Routes內的元件會因為url更動而重新渲染。

import { Link, Route, Routes } from "react-router-dom"
import { Home } from "./pages/Home"
import { Contact } from "./pages/Contact"

export function App() {
  return (
    <>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/contact">contact</Link>
        </li>
      </ul>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
    </>
  )
}
export default App;

到這邊Router還沒結束，還有一個要素我們明天再續!!